<template>
    <div>
        <div class="drag_box" v-for="(item, index) in items" :key="index" draggable="true" @dragstart="dragstart(index)"
            @drop="drop(index)" @dragover.prevent>
            {{ item }}
        </div>
    </div>
</template>
<script setup>
import { ref, watch } from 'vue';
// 定义拖拽列表的数据
const items = ref(['Item 1', 'Item 2', 'Item 3', 'Item 4']);

// 定义拖拽方法
function dragstart(index) {
    event.dataTransfer.setData("text/plain", index);
}
function drop(index) {
    const draggedIndex = event.dataTransfer.getData("text/plain");
    const tempItem = items.value[draggedIndex];
    items.value.splice(draggedIndex, 1);
    items.value.splice(index, 0, tempItem);
}
</script>
<style scoped lang="scss">
.drag_box {
    width: 200px;
    height: 50px;
    margin: 5px;
    background-color: aqua;
}
</style>